<template>
	<view class="page" :class="{
      bmborder: bmLine,
      clickable: clickable,
    }" @click="handleClick">
		<u-image v-if="image" show-loading :show-menu-by-longpress="false" :src="image" :width="imageSize"
			:height="imageSize" :radius="imageRadius" />
		<view class="f-center" :style="{
        height: imageSize,
      }">
			<u-text :text="title" :size="size" :color="color" :lines="lines" :bold="bold" />
			<slot name="center" />
			<view class="" style="display: flex;justify-content: space-between;">
				<view class="" style="width: 65%;">
					<u-text v-if="subTitle" :text="subTitle" :size="subSize" :color="subColor" :lines="subLines" />
				</view>
				<view class="" style="width: 34%;">
					<u-text v-if="subDate" :text="subDate" :size="subSize" :color="dateColor" :lines="subLines"
						align="right" />
				</view>
			</view>

			<slot name="bottom" />
		</view>
		<slot name="right" />
	</view>
</template>

<script>
	export default {
		props: {
			// 图片路径 (不传不显示)
			image: {
				type: String,
				default: "",
			},
			index: {
				type: Number,
				default: 0,
			},
			// 图片大小
			imageSize: {
				type: String,
				default: "150rpx",
			},
			// 图片圆角
			imageRadius: {
				type: String,
				default: "10rpx",
			},
			// 标题内容
			title: {
				type: String,
				default: "",
			},
			// 标题颜色
			color: {
				type: String,
				default: "#222222",
			},
			// 标题字体大小
			size: {
				type: String,
				default: "28rpx",
			},
			// 标题加粗
			bold: {
				type: Boolean,
				default: true,
			},
			// 标题显示行数
			lines: {
				type: String,
				default: "2",
			},
			// 副标题内容
			subTitle: {
				type: String,
				default: "",
			},
			// 时间内容
			subDate: {
				type: String,
				default: "",
			},
			// 副标题颜色
			subColor: {
				type: String,
				default: "#466EC5",
			},
			// 时间颜色
			dateColor: {
				type: String,
				default: "#B6B6B6",
			},
			// 副标题字体大小
			subSize: {
				type: String,
				default: "24rpx",
			},
			// 副标题显示行数
			subLines: {
				type: String,
				default: "1",
			},
			// 是否显示下划线
			bmLine: {
				type: Boolean,
				default: true,
			},
			// 点击反馈
			clickable: {
				type: Boolean,
				default: true,
			},
		},
		methods: {
			// 处理点击事件
			handleClick() {
				this.$emit("click", {
					id: this.index,
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.page {
		padding: 20rpx;
		display: flex;
		justify-content: flex-start;

		.f-center {
			flex: 1;
			margin-left: 20rpx;
			display: flex;
			flex-direction: column;
			overflow: hidden;
			padding: 10rpx;
			box-sizing: border-box;

			/deep/.u-text {
				align-items: flex-start;
			}
		}
	}

	.bmborder {
		border-bottom: 1rpx solid #d9d9d999;
	}

	.clickable:active {
		background-color: #fcfcfc;
	}
</style>